From: Paul Donald <newtwen@gmail.com>
Date: Sun, 17 Dec 2023 23:43:24 +0000 (+0100)
Subject: Merge pull request #6723 from knarrff/channel_analysis__base-channel
X-Git-Url: http://git.openwrt.org/%22https:/collectd.org//%22/%22https:/collectd.org/%22?a=commitdiff_plain;h=a962261b0b375378e379e31fcab4df5fca7a150e;p=project%2Fluci.git

Merge pull request #6723 from knarrff/channel_analysis__base-channel

Signed-off-by: Frank Löffler <frank.loeffler@uni-jena.de>

luci-mod-status: highlight primary 20 MHz channel
(cherry picked from commit 8b651996ff25cff94cf37608d775f0cbf7fd177a)
---

diff --git a/modules/luci-mod-status/htdocs/luci-static/resources/svg/channel_analysis.svg b/modules/luci-mod-status/htdocs/luci-static/resources/svg/channel_analysis.svg
index 8f01075d0b..aca186402e 100644
--- a/modules/luci-mod-status/htdocs/luci-static/resources/svg/channel_analysis.svg
+++ b/modules/luci-mod-status/htdocs/luci-static/resources/svg/channel_analysis.svg
@@ -16,4 +16,21 @@
 
 	<line x1="0" y1="90%" x2="100%" y2="90%" style="stroke:black;stroke-width:0.1" />
 	<text id="label_10" x="10" y="89%" style="fill:#eee; font-size:9pt; font-family:sans-serif; text-shadow:1px 1px 1px #000">-90 dbm</text>
+	<defs>
+		<linearGradient id="GradientVerticalCenteredBlack">
+			<stop class="stopinvis" offset="0%" />
+			<stop class="stopblack" offset="50%" />
+			<stop class="stopinvis" offset="100%" />
+		</linearGradient>
+	</defs>
+	<style>
+		.stopinvis {
+			stop-color: "transparent";
+			stop-opacity: 0;
+		}
+		.stopblack {
+			stop-color: "black";
+			stop-opacity: .1;
+		}
+	</style>
 </svg>
diff --git a/modules/luci-mod-status/htdocs/luci-static/resources/view/status/channel_analysis.js b/modules/luci-mod-status/htdocs/luci-static/resources/view/status/channel_analysis.js
index d8a3393256..98c5c7bf0a 100644
--- a/modules/luci-mod-status/htdocs/luci-static/resources/view/status/channel_analysis.js
+++ b/modules/luci-mod-status/htdocs/luci-static/resources/view/status/channel_analysis.js
@@ -64,14 +64,6 @@ return view.extend({
 			scanCache[res.bssid].graph = [];
 
 		channels.forEach(function(channel) {
-			var chan_offset = offset_tbl[channel],
-				points = [
-				(chan_offset-(step*channel_width))+','+height,
-				(chan_offset-(step*(channel_width-1)))+','+height_diff,
-				(chan_offset+(step*(channel_width-1)))+','+height_diff,
-				(chan_offset+(step*(channel_width)))+','+height
-			];
-
 			if (scanCache[res.bssid].graph[i] == null) {
 				var group = document.createElementNS('http://www.w3.org/2000/svg', 'g'),
 					line = document.createElementNS('http://www.w3.org/2000/svg', 'polyline'),
@@ -88,8 +80,33 @@ return view.extend({
 				chan_analysis.graph.firstElementChild.appendChild(group);
 				scanCache[res.bssid].graph[i] = { group : group, line : line, text : text };
 			}
+			if (channel_width > 2) {
+				if (!("main" in scanCache[res.bssid].graph[i])) {
+					var main = document.createElementNS('http://www.w3.org/2000/svg', 'polyline');
+					main.setAttribute('style', 'fill:url(#GradientVerticalCenteredBlack)');
+					scanCache[res.bssid].graph[i].group.appendChild(main)
+					chan_analysis.graph.firstElementChild.lastElementChild.appendChild(main);
+					scanCache[res.bssid].graph[i]["main"] = main;
+				}
+				var main_offset = offset_tbl[res.channel],
+					points = [
+					(main_offset-(step*(2  )))+','+height,
+					(main_offset-(step*(2-1)))+','+height_diff,
+					(main_offset+(step*(2-1)))+','+height_diff,
+					(main_offset+(step*(2  )))+','+height
+				];
+				scanCache[res.bssid].graph[i].main.setAttribute('points', points);
+			}
+
+			var chan_offset = offset_tbl[channel],
+				points = [
+				(chan_offset-(step*(channel_width  )))+','+height,
+				(chan_offset-(step*(channel_width-1)))+','+height_diff,
+				(chan_offset+(step*(channel_width-1)))+','+height_diff,
+				(chan_offset+(step*(channel_width  )))+','+height
+			];
 
-			scanCache[res.bssid].graph[i].text.setAttribute('x', chan_offset-step);
+			scanCache[res.bssid].graph[i].text.setAttribute('x', offset_tbl[res.channel]-step);
 			scanCache[res.bssid].graph[i].text.setAttribute('y', height_diff - 2);
 			scanCache[res.bssid].graph[i].line.setAttribute('points', points);
 			scanCache[res.bssid].graph[i].group.style.zIndex = res.signal*-1;